<template>
  <div class="page box">
    <scroll-view  :style="{'height': scrollHeight+'px'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView">
      <div class="page__bd page__bd_spacing">
        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
          <div v-for="item in imgUrls" :key="index">
            <swiper-item>
              <image :src="item" class="slide-image" mode="widthFix" />
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div class="details-box">
        <h4>{{detail.title}}</h4>
        <div class="comment-box">
          <div>
            <i><img src="../../../../static/images/icon_reputation.png" alt="" mode="widthFix"></i>
            <div>
              <span>好评率</span>
              <p>
                {{percentage}}%
              </p>
            </div>
            <b>{{detail.commentNum}}条评论</b>
          </div>
        </div>
        <div class="site-box">
          <ul>
            <li>
              <i><img src="../../../../static/images/icon-center-address.png" alt="" mode="widthFix"></i>
              <p>{{detail.address}}</p>
            </li>
            <li>
              <i><img src="../../../../static/images/icon_time.png" alt="" mode="widthFix"></i>
              <p>{{detail.opening }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="time-box" @click="calendarClick">
        <i><img src="../../../../static/images/icon-period.png" alt="" mode="widthFix"></i>
        <b>入住</b>
        <view class="weui-input">{{checkInDate}}</view>
        <p>
          <del>共{{nightsNum}}晚</del>
        </p>
        <b>离店</b>
        <view class="weui-input">{{checkOutDate}}</view>
      </div>
      <div class="allContent">
        <div :class="scrollTop>=550?'bar barFixed':'bar'">
          <div :class="currentTab==0?'item active':'item'" @click="scrollTo1(0)">
            门票预订
          </div>
          <div :class="currentTab==1?'item active':'item'" @click="scrollTo1(1)">
            景区介绍
          </div>
          <div :class="currentTab==2?'item active':'item'" @click="scrollTo1(2)">
            预订须知
          </div>
          <div :class="currentTab==3?'item active':'item'" @click="scrollTo1(3)">
            游客评论
          </div>
        </div>
        <div class="tabContent">
          <div class="tabs1" id="tabs1">
            <div class="booking-box" v-for="(item,index) in tickets" :key="index">
              <div class="price-box">
                <h2>{{item.name}}</h2>
                <div>
                  <p>
                    <!--item.price-->
                    <i>￥</i>
                    <b>{{item.price}}</b>
                    <span>.{{item.point}}</span>
                  </p>
                  <del>￥{{item.oldPrice}}元</del>
                </div>
              </div>
              <div class="pay-box">
                预订
              </div>
            </div>
          </div>
          <div class="tabs2" id="tabs2">
            <div class="title-box">
              <h5>景区介绍</h5>
              <div @click="introducesMore = !introducesMore">
                <span v-show="!introducesMore">展开</span>
                <i v-show="!introducesMore"><img src="../../../../static/images/icon-down.png" alt="" mode="widthFix"></i>
                <span v-show="introducesMore">收起</span>
                <i v-show="introducesMore"><img src="../../../../static/images/icon-down.png" class="up" alt="" mode="widthFix"></i>
              </div>
            </div>
            <div class="content-box" :class="{more:introducesMore}">
              <p v-for="(item , index) in introduces" :key="index">{{item}}</p>
            </div>
          </div>
          <div class="tabs3" id="tabs3">
            <div class="title-box">
              <h5>预订须知</h5>
              <div @click="noticeMore = !noticeMore">
                <span v-show="!noticeMore">展开</span>
                <i v-show="!noticeMore"><img src="../../../../static/images/icon-down.png" alt="" mode="widthFix"></i>
                <span v-show="noticeMore">收起</span>
                <i v-show="noticeMore"><img src="../../../../static/images/icon-down.png" class="up" alt="" mode="widthFix"></i>
              </div>
            </div>
            <div class="content-box" :class="{more:noticeMore}">
              <p v-for="(item , index) in introduces" :key="index">{{item}}</p>
            </div>
          </div>
          <div class="tabs4" id="tabs4">
            <div class="title-box">
              <h5>游客评论</h5>
              <div @click="commentMore = !commentMore">
                <span v-show="!commentMore">展开</span>
                <i v-show="!commentMore"><img src="../../../../static/images/icon-down.png" alt="" mode="widthFix"></i>
                <span v-show="commentMore">收起</span>
                <i v-show="commentMore"><img src="../../../../static/images/icon-down.png" class="up" alt="" mode="widthFix"></i>
              </div>
            </div>
            <div class="comment-details">
              <radio-group class="classify" @change="radioChange">
                <label class="classify-label" :class="{'active':isActive==index}" v-for="(item , index) in commentItems" :key="index">
                  <radio v-model="item.name" />
                  <text @click="isActive = index">{{item.name}}</text>
                </label>
              </radio-group>
              <div class="tourist-reviews">
                <!--游客评论-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        detail:{
          title:'汉庭酒店',commentNum : 320,praiseNum:140,
          address:'山西省长治市上党区和谐街',opening:'08:00-16:00'
        },
        imgUrls: [
          // 'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',
          'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'
        ],//轮播
        tabs: ["图文详情", "参数规格", "包装售后"],
        activeIndex: 0,
        fontSize: 30,
        scrollHeight:500,
        tabs1Height:0,
        tabs2Height:0,
        tabs3Height:0,
        currentTab:0,
        scrollTop:0,
        toView:"",
        tickets:[
          {name:'振兴小镇门票振兴小镇门票振兴小镇门票振兴小镇门票振兴小镇门票振兴小镇门票',oldPrice:662.2,price:510,point:1},{name:'振兴小镇门票',oldPrice:662,price:510,point:0}
        ],//门票
        introduces:[
          "　长治振兴小镇以“绿”为先，以“文”为魂，以“旅”为径，是一处集山水风光、休闲娱乐、民俗体验、农艺博览、旅游开发、农业观光、生态采摘、产品营销、会务策划、食品加工、餐饮宾馆、精品民宿、健康养生、旅游地产开发于一体的乡村旅游度假胜地。小镇四周群山环绕、翠绿掩映、气候宜人，地处北纬38°线，年平均气温9℃，素有“太行无扇之城、上党天然氧吧”之称。春来“山清水秀、鸟语花香”；夏来“清风凉爽、避暑山庄”；秋来“硕果累累、五谷飘香”；冬来“雪山美景、温泉疗养”，成为太行乡村旅游的新选择。",
        ],
        commentItems:[
          {checked:false,name:'全部评论'},{checked:false,name:'好评'},
          {checked:false,name:'中评'},{checked:false,name:'差评'},{checked:false,name:'还行'},
          {checked:false,name:'好看'},{checked:false,name:'不想再去'},{checked:false,name:'一般'},
        ],//评论
        commentMore:false,//显示评论更多
        isActive:-1,
        introducesMore:false,//显示介绍更多
        noticeMore:false,//显示须知更多
        //入住日期，默认为今天日期
        checkInDate: moment().format("MM-DD"),
        //离开日期，默认为明天日期
        checkOutDate: moment().add(1,'days').format("MM-DD"),

      }
    },
    mounted(){
      var that=this;
      wx.getSystemInfo({
        success: function(res) {
          that.scrollHeight=res.windowHeight;
        }
      });
    },
    computed: {
      //好评占比
      percentage:function() {
        return  (this.detail.praiseNum / this.detail.commentNum *100).toFixed(2)
      },
      //入住几晚
      nightsNum:function(){
        console.log(this.checkInDate)
        return moment(this.checkOutDate).diff(moment(this.checkInDate), 'day')

      },
      navbarSliderClass() {
        if (this.activeIndex == 0) {
          return 'weui-navbar__slider_0'
        }
        if (this.activeIndex == 1) {
          return 'weui-navbar__slider_1'
        }
        if (this.activeIndex == 2) {
          return 'weui-navbar__slider_2'
        }
      },
    },
    onLoad(options){
      //h获取入住离开时
      let checkTime = JSON.parse(options.time)
      this.checkInDate =  moment(checkTime[0]).format("MM-DD")
      this.checkOutDate = moment(checkTime[1]).format("MM-DD")
      console.log(checkTime)
      var _this=this;
      var query = wx.createSelectorQuery();
      //选择id
      query.select('.tabs1').boundingClientRect();
      query.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs1Height=res[0].height;
      });
      var query1 = wx.createSelectorQuery();
      query1.select('.tabs2').boundingClientRect();
      query1.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs2Height=res[0].height;
      });
      var query3 = wx.createSelectorQuery();
      query3.select('.tabs3').boundingClientRect();
      query3.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs3Height=res[0].height;
      });
    },
    methods: {
      //选中评论
      radioChange(e){
        console.log(e)
      },
      //时间
      bindDateInChange: function (e) {
        this.checkInDate = moment(e.mp.detail.value).format('MM-DD')
      },
      bindDateOutChange: function (e) {
        this.checkOutDate = moment(e.mp.detail.value).format('MM-DD')
      },
      tabClick(e) {
        // console.log(e);
        this.activeIndex = e.currentTarget.id;
      },
      calendarClick(){
        wx.navigateTo({url: '../date/main'})
      },
      scrolltolower(){
      },
      scroll(e) {
        var scrollH=e.mp.detail.scrollTop;
        var tabs2H=480+this.tabs1Height;
        var tabs3H=480+this.tabs2Height+this.tabs1Height;
        if(scrollH<tabs2H){
          this.currentTab=0;
        }else if(tabs2H<scrollH<tabs3H){
          this.currentTab=1;
        }
        if(scrollH>tabs3H){
          this.currentTab=2;
        }
        // console.log(scrollH);
        // console.log(tabs3H);
        this.scrollTop=scrollH;
        this.toView="";
      },
      scrollTo1(val){

        var tabs2H=480+this.tabs1Height;
        var tabs3H=480+this.tabs2Height+this.tabs1Height;
        // console.log(val);
        if(val==0){
          this.toView="tabs1";
        }else if(val==1){
          this.toView="tabs2";

        }else{
          this.toView="tabs3";
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../static/css/details";
  .time-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:120rpx;
    margin-bottom: 30rpx;
    padding: 0 30rpx;
    background:rgba(255,255,255,1);
    font-size: 30rpx;
    color: #333;
    border-radius:36rpx;
    b{
      font-weight: bold;
      margin:0 20rpx 0 10rpx;
    }
    .weui-input {
      margin-right: 20rpx;
    }
    img{
      width: 34rpx;
    }
    p{
      flex: 1;
      text-align: center;
      del {
        display: inline-flex;
        height:36rpx;
        padding: 0 22rpx;

        border:1px solid rgba(204,204,204,1);
        border-radius:18rpx;
        font-size: 24rpx;
      }
    }
  }

  .hotel-date {
    margin-right: 1vw;
    padding-right: 1vw;
    border-right: 1px solid #ccc;
    min-width: 18vw;
    .input-box {
      /*margin-top: 10px;*/
      .input-box-item {
        height:2.4vw;
        line-height: 2.4vw;
        display: flex;
        font-size: 2.4vw;

        span {
          text-align: center;
          color: #999999;
        }

        .input-box-item-content {
          position: relative;
          appearance: none;
          outline: none;
          flex-grow: 1;
          margin-left:0;
          padding-left: 0;
          height:2.4vw;
          border-radius: 4px;
          color: #4c4c4c;

          .today {
            float: right;
            padding-right: 0.2rem;
            color: #ccc;
          }
        }
      }
    }

    .submit {
      margin-bottom: 12px;
      border-radius: 5px;
      height: 0.8rem;
      line-height: 0.8rem;
      background-color: #F28300;
      font-size: 0.3rem;
      color: #FFFFff;
      text-align: center;
    }
  }
</style>
